<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        input{
            display: block;
            outline: none;
            height: 40px;
            width: 250px;
            margin: 10px auto;
        }
        #button{
            width: 140px;
            height: 50px;
            background-color: deeppink;
            margin: 10px auto;
            display: block;
            border: 0;
        }
        .sex,.role {
            width: 250px;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
        .sex input {
            width: 10px;
            height: auto;
            margin: 0;
            display: inline-block;
        }
        .role{
            margin-top: 10px;
            outline: none;
        }
    </style>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form>
    <input type="text" placeholder="请输入姓名" name="username" id="username">
    <input type="password" placeholder="请输入密码" name="password" id="password">
    <input type="text" placeholder="请输入电话号码" name="tel" id="tel">
    <div class="sex">
        性别:
        <input type="radio" name="sex" value="男" class="sex1">男
        <input type="radio" name="sex" value="女" class="sex1">女
    </div>
    <div class="role">
        角色：
        <select id="role">

        </select>
    </div>
    <button type="button" id="button">修改</button>
</form>
<script>
    // 解析URL中的查询参数
    function getQueryParams() {
        var params = {};
        var queryString = window.location.search.slice(1);  // 去掉问号
        var pairs = queryString.split("&");

        pairs.forEach(function(pair) {
            var [key, value] = pair.split("=");
            params[key] = decodeURIComponent(value || '');
        });
        return params;
    }

    // 使用解析出的参数填充表单
    var params = getQueryParams();

    // 使用.value设置input元素的值
    let username = document.querySelector("#username");
    let password = document.querySelector("#password");
    let tel = document.querySelector("#tel");
    if (username) username.value = params.username;
    if (password) password.value = params.password;
    if (tel) tel.value = params.tel;
    console.log(params.sex)
    // 设置性别的单选按钮
    let sexOptions = document.querySelectorAll('input[name="sex"]');
    if (sexOptions) {
        sexOptions.forEach(function(option) {
            if (option.value === params.sex) {
                option.checked = true;
            }
        });
    }
    $("#button").click(function(){
        $.ajax({
            type:"post",
            url:"/updateUser.do",
            data: JSON.stringify({
                "user_id":params.user_id,
                "username":$("#username").val(),
                "password":$("#password").val(),
                "tel":$("#tel").val(),
                "sex":$(".sex1:checked").val(),
                "roleid":$("#role").val()
            }),
            contentType: "application/json; charset=UTF-8",  // 设置请求的内容类型
            success:function(data){
                if (data==="true"){
                    alert("修改成功！")
                    location.href="user.html"
                }else{
                    alert("修改失败！")
                }
            }
        })
    })

    $(function() {
        $.ajax({
            type: "post",
            url: "/getRole.do",
            success: function(data) {
                let roleSelect = $("#role");

                // 清空现有选项
                roleSelect.empty();

                // 遍历返回的数据并动态添加到<select>中
                $.each(data, function(index, role) {
                    // 创建一个新的<option>元素
                    let option = $("<option></option>")
                        .val(role.roleid)
                        .text(role.rolename);

                    // 将新的<option>添加到<select>中
                    roleSelect.append(option);
                });
            },
            error: function(xhr, status, error) {
                console.error("请求失败:", status, error);
            }
        });
    });
</script>
</body>
</html>
